﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>PersonalData</title>
    <link href="~/lib/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/scripts/jquery-3.5.1.js"></script>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

            .file input {
                position: absolute;
                font-size: 100px;
                right: 0;
                top: 0;
                opacity: 0;
            }

            .file:hover {
                background: #AADFFD;
                border-color: #78C3F3;
                color: #004974;
                text-decoration: none;
            }
    </style>
</head>
<body>
    <form class="layui-form" action="" id="frmUser">
        <input name="Id" hidden value="@ViewBag.User.Id" />
        <div class="layui-form-item">
            <label class="layui-form-label">用户姓名</label>
            <div class="layui-input-inline">

                <input type="text" value="@ViewBag.User.UserName" name="UserName" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">个人头像</label>
            <div class="layui-input-inline">
                @*<img src="~/Content/image/TM.jpg" />  学姐头像存放路径 *@
                @*<input type="text" name="PersonImage" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">*@
                <img name="PersonImage" src="~/@ViewBag.User.UserImage" id="TM" class="layui-circle" style="border: 2px solid #A9B7B7;" width="99" alt="">
                <a href="javascript:;" class="file">
                    选择文件
                    <input type="file" name="file" id="UpdateImage">
                </a>
                <input type="text" name="UserImage" id="PersonalIcon" />


            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            </div>
        </div>
    </form>
    <script src="~/lib/layui-v2.5.6/layui/layui.js"></script>

    <script>

        layui.use(['form', 'upload'], function () {
            var form = layui.form;
            var $ = layui.$;
            var upload = layui.upload;
            var layer = layui.layer;
            var uploadInst = upload.render({
                elem: '#UpdateImage' //绑定元素
                , url: '/Home/UserImageUpdate' //上传接口
                , done: function (res) {
                    $("#PersonalIcon").val(res.remark);
                    $("#TM").attr("src", "/" + res.remark);

                }
                , error: function (re) {
                    //请求异常回调
                    console.log(12);
                }
            });

            form.on('submit(formDemo)', function (data) {
                console.log(123);
                var con = $("#frmUser").serialize();
                console.log(con);
                $.ajax({
                    url: "/Home/UpdateUser",
                    type: "post",
                    data: con,
                    success: function (re) {
                        if (re) {
                            layer.msg(re.msg);
                            parent.location.reload();
                            setTimeout(function () {
                                location.reload();
                            }, 1500);

                        } else {
                            layer.msg(re.msg);
                        }
                    }

                });
                return false;
            });
        });
    </script>
</body>
</html>
